<template>
	<el-dialog
      ref="editDialog"
      class="editKmVisible"
      title="批量导入"
      :visible.sync="editKmVisible"
      width="400px"
      :before-close="beforeClose"
    >
      <div>
		<el-upload
			class="upload-demo"
			drag
			action=""
			:auto-upload="false"
			:on-change="handleFileChange"
			multiple>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text"><em style="color:#0052D9">点击上传</em> / 拖拽到此区域</div>
		</el-upload>
		<div class="exportattention">
			<span>每次导入仅能上传一个文件</span>
			<a href="https://bs-exam-bucket.oss-cn-beijing.aliyuncs.com/exportTemplate/%E5%AE%A2%E8%A7%82%E9%A2%98%E7%AD%94%E6%A1%88%E5%AF%BC%E5%85%A5.xlsx" style="font-style:normal;cursor: pointer;color:#0052D9" @click="exportimportExcel">下载模板</a>
		</div>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button type="primary" @click="submitUpload" :loading="loading"
          >确认</el-button
        >
        <el-button  @click="goback">取消</el-button>
        
      </div>
    </el-dialog>
</template>

<script>
import {importBatchAnswer} from '@/api/paperinfo/paperinfo.js'
	export default{
		props:['examobj','addexamtype','examid'],
		data(){
			return{
				files:'',
				importCon:{
					file:'',
					examTemplateId:'',
				},
				editKmVisible:true
			}
		},
		mounted() {
			// this.filteredOptions = [...this.examclassify]
		},
		methods:{
			// 导出
			exportimportExcel(){
				this.download('task/school/config/export', {
					...queryparams
				}, `学校分配情况_${new Date().getTime()}.xlsx`)
			},
			handleFileChange(file, fileList) {
				// console.info(file.raw,'file')
				// 将文件添加到 files 数组中
				// this.files.push(file.raw);
				this.importCon.file = file.raw;
			},
			beforeClose(done) {
				this.importCon.file = '';
				this.examid = '';
				this.$nextTick(() => {
					done();
				});
			},
			submitUpload() {
				const formData = new FormData();
				formData.append('file', this.importCon.file);
				formData.append('examTemplateId', this.examid);
				console.info(formData)
				importBatchAnswer(formData).then(res=>{
					if(res.code==200){
					    this.$message.success('上传成功')
						this.$emit('uploadclick',false)
						 this.goback();
					}else{
						this.$message.error(res.msg)
					}
				})
			},
            goback(){
				this.beforeClose(() => {
					this.editKmVisible = false;
					this.$emit('uploadclick',false)
				});
			}
		},
        components: {
            
        }
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:110px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #1A48DB;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #1A48DB;
		color:#1A48DB;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#1A48DB;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#1A48DB;
		padding:0 4px;
	}
    .addExamContent >>> .distpicker-address-wrapper select{
        height:36px;
        border-radius:10px;
        border:1px solid #D8E4F0;
        color:#999;
        font-size:14px;
    }
    .addExamContent >>> .el-upload-dragger{
        width:100%;
    }
    .addExamContent >>> .el-upload{
        width:100%;
    }
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
    .exportattention{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:12px;
        color:#86909C
    }
    .exportattention b{
        color:#1A48DB;
        cursor: pointer;
    }
</style>